<template>
  <div id="My">
    <div class="heaader-container">
      <header>{{$t("my.header")}}</header>
      <div class="userinfo">
        <div>
          <div class="avatar">
            <img src="../../assets/defaultAvatar.png" alt>
          </div>
          <div class="email_vip">
            <p class="email">666666@qq.com</p>
            <div class="vip">
              <span>
                <img v-if="false" src="../../assets/vip_icon.png" alt>
                <img v-if="true" src="../../assets/noVip.png" alt>
              </span>
              <!-- star -->
              <ul>
                <li v-for="(item,index) in 5" :key="index">
                  <img v-if="index <= 1" src="../../assets/star_active.png" alt>
                  <img v-if="index > 1" src="../../assets/star.png" alt>
                </li>
              </ul>
            </div>
          </div>
        </div>
        <div class="signIn" @click="$router.push('/signIn')">{{$t('my.signin')}}</div>
      </div>
    </div>
    <div class="notice" @click="$router.push('/notice')">{{$t("my.notice")}}{{noticeText}}</div>
    <ul class="myNav">
      <li v-for="(item,index) in myNavItem" :key="index">
        <router-link :to="item.path">
          <div class="icon-cont">
            <img :src="item.icon" alt>
          </div>
          <div>{{item.name}}</div>
        </router-link>
      </li>
    </ul>
    <!-- list列表 -->
    <Scroll height="300" :isPull="false">
      <div class="lists-container">
        <ul>
          <li v-for="(item,index) in listItems" :key="index">
            <router-link :to="item.url">
              <div class="list-names">
                <div class="list-icon">
                  <img :src="item.icon" alt>
                </div>
                <div class="list-title">{{item.text}}</div>
              </div>
              <div class="more-icon">
                <img :src="item.moreIcon" alt>
              </div>
            </router-link>
          </li>

          <!-- 这个按钮没有路由 是退出的方法 所以就没有遍历 懂吗？ -->
          <li @click="logOut">
            <a href="javascript:void(0);">
              <div class="list-names">
                <div class="list-icon">
                  <img src="../../assets/logout.png" alt>
                </div>
                <div class="list-title">{{$t("my.logOut")}}</div>
              </div>
              <div class="more-icon">
                <img src="../../assets/more_icon.png" alt>
              </div>
            </a>
          </li>
        </ul>
      </div>
    </Scroll>
  </div>
</template>

<script>
import Scroll from "components/BScroll";
export default {
  name: "my",
  data() {
    return {
      noticeText: "新系统升级中，欢迎使用！",
      myNavItem: [
        {
          icon: require("../../assets/applyFor_vip.png"),
          path: "/vip",
          name: this.$t("my.applyFor_vip")
        },
        {
          icon: require("../../assets/sweets.png"),
          path: "/sweets",
          name: this.$t("my.sweets")
        },
        {
          icon: require("../../assets/earnings.png"),
          path: "/inventory",
          name: this.$t("my.earnings")
        },
        {
          icon: require("../../assets/dapp.png"),
          path: "/dapp",
          name: this.$t("my.DAPP")
        },
        {
          icon: require("../../assets/record.png"),
          path: "/record",
          name: this.$t("my.record")
        }
      ],
      listItems: [
        {
          icon: require("../../assets/transfor.png"),
          moreIcon: require("../../assets/more_icon.png"),
          text: this.$t("my.transfor"),
          url: "/exchange"
        },
        {
          icon: require("../../assets/sem_link.png"),
          moreIcon: require("../../assets/more_icon.png"),
          text: this.$t("my.sem_link"),
          url: "/promotion"
        },
        {
          icon: require("../../assets/connect_us.png"),
          moreIcon: require("../../assets/more_icon.png"),
          text: this.$t("my.connect_us"),
          url: "/"
        },
        {
          icon: require("../../assets/settings.png"),
          moreIcon: require("../../assets/more_icon.png"),
          text: this.$t("my.settings"),
          url: "/settings"
        },
        {
          icon: require("../../assets/partner.png"),
          moreIcon: require("../../assets/more_icon.png"),
          text: this.$t("my.partner"),
          url: "/partner"
        },
        {
          icon: require("../../assets/issue.png"),
          moreIcon: require("../../assets/more_icon.png"),
          text: this.$t("my.issue"),
          url: "/faq/faq"
        }
      ]
    };
  },
  methods: {
    logOut() {
      alert("退出登录!!!!!");
    }
  },
  components: {
    Scroll
  }
};
</script>

<style lang="stylus" scoped>
@import '../../utils/styl/mixin.styl'
#My
  position fixed
  top 0
  bottom 0
  width 100%
  background-color $bodyBg
  .heaader-container
    width 100%
    height rem(189)
    bgImg('../../assets/my_headerBg.png', contain)
    background-position 0 0
    header
      color $fontColor
      text-align left
      width 100%
      font-size rem(14)
      padding rem(27) rem(31) rem(21)
    .userinfo
      box-sizing border-box
      padding-left rem(20)
      display flex
      justify-content space-between
      align-items flex-start
      div
        display flex
        justify-content flex-start
        .avatar
          width rem(70)
          height rem(70)
          img
            width 100%
            height 100%
            object-fit contain
        .email_vip
          display flex
          flex-direction column
          justify-content flex-end
          margin-left rem(6)
          .email
            font-size rem(12)
            color $myColor
          .vip
            margin-top rem(9)
            display flex
            justify-content flex-start
            align-items center
            span
              display block
              width rem(24)
              height rem(24)
              img
                width 100%
                height 100%
                object-fit contain
            ul
              display flex
              justify-content flex-start
              margin-left rem(4)
              li
                width rem(10)
                height rem(10)
                margin 0 rem(2)
                img
                  width 100%
                  height 100%
      .signIn
        width rem(72)
        line-height rem(27)
        text-indent rem(16)
        color $fontColor
        bgImg('../../assets/signIn_bg.png', contain)
  .notice
    color $myColor
    margin rem(13) auto rem(14)
    font-size rem(14)
  .myNav
    box-sizing border-box
    padding 0 rem(25) rem(2)
    display flex
    justify-content space-between
    li
      .icon-cont
        width rem(62)
        height rem(62)
        margin-bottom rem(7)
        img
          width 100%
          height 100%
          object-fit contain
      a
        font-size rem(13)
        color $fontColor
  .lists-container
    padding-top rem(14)
    ul
      width 100%
      box-sizing border-box
      padding-left rem(20)
      li
        width 100%
        line-height rem(40)
        background-color $listBg
        margin-bottom rem(9)
        border-top-left-radius rem(28)
        border-bottom-left-radius rem(28)
        a
          color $fontColor
          display flex
          justify-content space-between
          align-items center
          width 100%
          .list-names
            margin-left rem(25)
            display flex
            justify-content flex-start
            align-items center
            width 100%
            .list-icon
              width rem(15)
              height rem(15)
              img
                display block
                width 100%
                height 100%
                object-fit contain
            .list-title
              margin-left rem(21)
              font-size rem(15)
          .more-icon
            width rem(20)
            height rem(10)
            margin-right rem(20)
            img
              display block
              width 100%
              height 100%
              object-fit contain
</style>
